<template>
	<view>
		<view class="content">
			<view class="content_top">
				<image src="../../static/icon9.png"></image>
				<view>
					<text>运单号：{{list.tWaybill.waybillNumber}}</text>
					<text>{{list.creationTime}}</text>
				</view>
			</view>
			<view class="description_box">
				<text>{{list.tWaybill.shipZone}}</text>
				<image src="../../static/iocn4.png">
					<text>{{list.tWaybill.receiveZone}}</text>
			</view>
			<view class="description_top">
				<text>货物信息：{{list.tWaybill.goodsName}} / {{list.tWaybill.goodsPackagMethod}} / {{list.tWaybill.goodsSize}}m³ / {{list.tWaybill.goodsWeight}}T </text>
				<text>车辆信息：{{list.tWaybill.lesscarload}} / {{list.tWaybill.demandLength}} / {{list.tWaybill.demandLoad}}T / {{list.tWaybill.demandStyle}}</text>
			</view>
			<view class="descrip_top">
				<view class="box_box">装</view>
				<view class="descr_box">
					<text v-if="list.tWaybill.shipCompany=='null'">个体经营</text>
					<text v-else>{{list.tWaybill.shipCompany}}</text>
					<text>{{list.tWaybill.shipAddress}}</text>
				</view>
			</view>
			<view class="descrip_top">
				<view class="box_key">卸</view>
				<view class="descr_box">
					<text v-if="list.tWaybill.receiveCompany==''">个体经营</text>
					<text v-else>{{list.tWaybill.receiveCompany}}</text>
					<text>{{list.tWaybill.receiveAddress}}</text>
				</view>
			</view>
			<view class="content_box">
				<view>
					<text>路程全长：</text>
					<text class="box">{{list.tWaybill.totalDistance}} 公里</text>
				</view>
				<view>
					<text>装货时间：{{list.tWaybill.loadTime}}</text>
				</view>
			</view>
			<view class="products">
				<image src="../../static/iocn8.png"></image>
				<view>
					<text>司&#12288;机：{{list.tDriver.trueName}}</text>
					<text>车牌号：{{list.tDriver.carNumber}}</text>
				</view>
			</view>
			<view class="products_box">
				<view>
					<text>总运费：</text>
					<text class="text_a">{{list.offerNow}} 元</text>
				</view>
				<view>
					<text>订&#12288;金：</text>
					<text class="text_a">{{list.deposit}} 元</text>
					<text class="text_b" v-if="list.tWaybill.returnDeposit == true">（可退回）</text>
					<text class="text_b" v-else>（不可退还）</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer_fl">
				<text class="box_top">￥{{offerFinalsa}}元</text>
				<text class="box_box">实际运费</text>
			</view>
			<view class="footer_ft" @click="dakai()">联系司机</view>
			<view class="footer_fr" @click="show = true">确认运单</view>
		</view>


		<!-- 弹窗 -->
		<view class="screenshot" v-show="notification" @click="guanbi()">
			<view class="screenshot_key">
				<image src="../../static/iocn10.png" class="image_top"></image>
				<uni-icons  type="closeempty" size="30"  class="image_gb"
				  @click="guanbi()"></uni-icons>
				<view class="screenshot_top">仅限使用注册号码拨打</view>
				<view class="screenshot_box">{{list.tDriver.mobile}}</view>
				<view class="screenshot_zhen" @click.stop="bohao()">立即拨号</view>
				<view class="screenshot_lis">已为您提供号码保护，支付定金后可查看真实号码</view>
			</view>
		</view>
		
		<view >
			<u-modal :show="show" :showCancelButton="true" @confirm="confirm" @cancel="cancel" :title="title" :content='content'></u-modal>
		</view>
		
	</view>
</template>

<script>
	import {
		GetOfferDetail,CallRecordCreate,OfferConfirm
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				notification: false,
				id: '',
				list: [],
				
				show:false,
				title:'确认订单',
				content:'',
				offerFinalsa:''
			};
		},
		onLoad(options) {
			this.GetOfferDetail(options)
		},
		methods: {
			dakai() {
				this.notification = true
			},
			guanbi() {
				this.notification = false
			},




			// 获取报价详情
			async GetOfferDetail(options) {
				var id = options.id
				console.log(id)
				console.log(options)
				try {
					const {
						data: res
					} = await GetOfferDetail({
						id
					})
					this.list = res.result
					this.offerFinalsa = this.list.deposit + this.list.offerNow
				} catch (e) {}
			},

		
		// 拨打电话
		 bohao() {
			let phone = this.list.tDriver.mobile
			uni.makePhoneCall({
				phoneNumber: phone,
				success:(res) =>{
					this.CallRecordCreate();
				},
				fail:(res) =>  {
					console.log('打电话失败了');
				}
			})
		},
		
		// 创建通话记录
		async CallRecordCreate() {
			var waybillId = this.list.tWaybill.id
			var driverId = this.list.tWaybill.driverId
			var consignorId = this.list.tWaybill.shiperId
			try {
				const {
					data: res
				} = await CallRecordCreate({
					waybillId,
					driverId,
					consignorId
				})
				
			} catch (e) {}
		},
		
		
		// 确认报价  确认运单
		async OfferConfirm(){
			var id = this.list.tWaybill.id
			var deposit = this.list.deposit
			var offer = this.list.offerNow
			var driverId = this.list.tDriver.id
			try {
				const {
					data: res
				} = await OfferConfirm({
					id,
					deposit,
					offer,
					driverId
				})
				uni.showToast({
					title: "成功",
					icon: 'none',
				})
				setTimeout(function() {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 600)
			} catch (e) {}
		},
		
		// 确认
		confirm(){
			this.show = false;
			this.OfferConfirm()
		},
		// 取消
		cancel(){
			this.show = false;
		}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 0 15upx;
	}

	.content {
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		margin-top: 15upx;

		.content_top {
			display: flex;
			align-items: center;
			padding: 15upx 40upx;

			image {
				width: 51upx;
				height: 51upx;
			}

			view {
				padding-left: 30upx;

				text {
					display: block;
					font-size: 24.53upx;
					font-weight: 400;
					color: #383838;
				}
			}
		}

		.description_box {
			width: 100%;
			height: 75.35upx;
			opacity: 1;
			background: #F0F0F0;
			padding: 0 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				white-space: nowrap;
				overflow: hidden;
			    text-overflow: ellipsis;
				font-size: 28upx;
				color: #000;
				font-weight: bold;
			}

			image {
				width: 112upx;
				height: 112upx;
			}
		}

		.description_top {
			padding: 0 50upx;

			text {
				display: block;
				font-size: 24.53upx;
				color: #383838;
				padding-top: 20upx;
			}
		}

		.descrip_top {
			margin-top: 20upx;
			height: 75upx;
			opacity: 1;
			background: #F0F0F0;
			padding: 0 40upx;
			display: flex;
			align-items: center;

			.box_box {
				width: 56upx;
				height: 56upx;
				opacity: 1;
				border-radius: 10upx;
				background: #FFC300;
				font-size: 38upx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 56upx;
			}

			.box_key {
				width: 56upx;
				height: 56upx;
				opacity: 1;
				border-radius: 10upx;
				background: #EF4D3D;
				font-size: 38upx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 56upx;
			}

			.descr_box {
				padding-left: 28upx;

				text {
					display: block;
					font-size: 22upx;
					color: #000;
				}
			}
		}

		.content_box {
			padding: 0 40upx 30upx;
			border-bottom: 2upx solid #E5E5E5;

			view {
				display: flex;
				align-items: center;
				padding-top: 12upx;

				text {
					font-size: 24upx;
					color: #000;
					font-weight: bold;
				}

				.box {
					color: #EF4D3D;
				}
			}
		}

		.products {
			padding: 20upx 45upx;
			display: flex;
			align-items: center;

			image {
				width: 98upx;
				height: 98upx;
			}

			view {
				padding-left: 25upx;

				text {
					display: block;
					font-size: 24upx;
					color: #383838;
					padding: 5upx 0;
				}
			}
		}

		.products_box {
			padding: 0 45upx 20upx;

			view {
				display: flex;
				align-items: center;

				text {
					font-size: 28upx;
					font-weight: bold;
				}

				.text_a {
					color: #EF4D3D;
				}

				.text_b {
					color: #808080;
				}
			}
		}

		border-radius: 20upx;
	}

	.footer {
		width: 750upx;
		opacity: 1;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30upx 35upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.footer_fl {
			.box_top {
				font-size: 28upx;
				color: #F04D3E;
				font-weight: bold;
				display: block;
				text-align: right;
			}

			.box_box {
				font-size: 22.78upx;
				color: #000;
				text-align: right;
				display: block;
			}
		}

		.footer_ft {
			margin-left: 150upx;
			width: 191upx;
			height: 70upx;
			opacity: 1;
			border-radius: 17.52upx;
			background: #FFFFFF;
			border: 2upx solid #EF4D3D;
			font-size: 31.54upx;
			color: #EF4D3D;
			text-align: center;
			line-height: 66upx;
			font-weight: bold;
		}

		.footer_fr {
			width: 191upx;
			height: 70upx;
			opacity: 1;
			border-radius: 17.52upx;
			background: #EF4D3D;
			font-size: 31.54upx;
			color: #fff;
			text-align: center;
			line-height: 66upx;
			font-weight: bold;
		}
	}



	.screenshot {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;

		.screenshot_key {
			width: 720upx;
			height: 480upx;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
			border-radius: 20upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding-top: 20upx;

			.image_top {
				width: 100upx;
				height: 100upx;
				margin: 0 auto;
				display: block;
			}

			.image_gb {
				width: 32upx;
				height: 32upx;
				position: absolute;
				top: 8upx;
				right: 48upx;
			}

			.screenshot_top {
				font-size: 28upx;
				color: #000;
				text-align: center;
				padding-top: 30upx;
			}

			.screenshot_box {
				font-size: 38upx;
				font-weight: bold;
				color: #000;
				text-align: center;
				padding-top: 20upx;
			}

			.screenshot_zhen {
				width: 601upx;
				height: 71upx;
				opacity: 1;
				border-radius: 17.52upx;
				background: #FFFFFF;
				line-height: 65upx;
				border: 3upx solid #F04D3E;
				font-size: 31.54upx;
				text-align: center;
				font-weight: bold;
				margin: 0 auto;
				margin-top: 50upx;
			}

			.screenshot_lis {
				font-size: 24upx;
				color: #808080;
				text-align: center;
				padding-top: 20upx;
			}

		}
	}
</style>
